<script lang="ts" setup>
import { ref } from 'vue'
import { ElMessageBox } from 'element-plus'

// 控制对话框显隐
const dialogVisible = ref(false)

// 接收父组件传来的删除事件
const props = defineProps({
  deleteClick: Function
})
// 定制删除动作
const ondeleteClick = () => {
  dialogVisible.value = false
  props.deleteClick()
}

const handleClose = (done: () => void) => {
  ElMessageBox.confirm('你确定关闭这个对话框吗？')
    .then(() => {
      done()
    })
    .catch(() => {
      // catch error
    })
}
</script>

<template>
  <el-dropdown placement="bottom">
    <button class="iconfont point" disabled>&#xe60c;</button>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item plain @click="dialogVisible = true">删除</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>

  <el-dialog
    v-model="dialogVisible"
    title="Tips"
    width="500"
    :before-close="handleClose"
  >
    <span>你确定要删除这个分类及其包含的待办事项吗？</span>
    <template #footer>
      <div class="dialog-footer">
        <!-- .prevent保证只处理删除操作，防止发生页面跳转 -->
        <el-button @click.prevent="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click.prevent="ondeleteClick">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style lang="less" scoped>
.iconfont {
  border: none;
  color: #a3a3a3;
  background-color: rgba(255,255,255,0);
}
.point {
  display: none;
  font-size: 15px;
  cursor: pointer;
}
</style>
